<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <link rel="stylesheet" type="text/css" href="../cssjs/css/bootstrap-icons.css" />
    <link rel="stylesheet" type="text/css" href="../cssjs/css/bootstrap.css" />
    <script src="../cssjs/js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #box>div {
            padding: 10px;
            border-radius: 10px;
            background-color: gray;
            margin-bottom: 10px;
            width: 300px;
        }

        #topmonitor {
            user-select: none;
            position: fixed;
            top: 0;
            width: 100%;
            background-color: #ffffff;
            border: 1px solid #e0e0e0;
            box-shadow: 5px;
        }

        #topmonitor>div {
            width: 1226px;
            padding: 0, 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        #topmonitor a {
            text-decoration: none;
            display: block;
            /* border: 1px solid black; */
        }

        #topmonitor>div a {
            color: #000000;
            font-size: 14px;
        }

        #topmonitor>div>div {
            width: 50%;
            display: flex;
            justify-content: space-between;
        }
    </style>
</head>

<body>
    <!-- 监听页面的滚动距离, 切换内容的显示与否 -->
    <div id="box"></div>
    <div id="topmonitor" style="display: none">
        <div>
            <a href=""><img src="../img/s_logo.png" alt=""></a>

            <div>
                <a href="" style="color: #ff3700;">首页</a>
                <a href="">品牌集成馆</a>
                <a href="">大师名匠馆</a>
                <a href="">积分商城</a>
                <a href="">大客户专区</a>
            </div>

            <a href="" style="float:right;width: 100px; background-color: red;color: #ffffff;">
                <img src="../img/购物车.png" alt="" style="width: 20px;">
                <p style="display: block;">购物车</p>
            </a>

        </div>
    </div>

    <script src="../vendor/jquery-3.6.0.js"></script>
    <script>
        for (let i = 0; i < 1000; i++) {
            const div = document.createElement('div')
            div.innerHTML = i
            box.appendChild(div)
        }
        onscroll = function () {
            //滚动的距离
            const y = document.documentElement.scrollTop || document.body.scrollTop

            console.log('y:', y)

            topmonitor.style.display = y > 750 ? '' : 'none'
        }
    </script>
</body>

</html>